<template>
  <Drawer 
    placement="left" 
    :closable="false" 
    v-model="value"
    @on-close="close()"
  >
    <div class="menus_items">
      <div v-for="(item, index) in !$route.meta.requireAuth ? titles : profileTitles"
        :key="index"
        class="menus_item"
      >
        <router-link class="site-page" :to="item.to">
          <Icon :type="item.icon" />
          <span> {{item.title}}</span>
        </router-link>
      </div>
    </div>
  </Drawer>
</template>

<script>
export default {
  name: 'SideBar',
  props: {
    value: Boolean
  },
  data() {
    return {
      titles: [
        { to: "/", title: "首页", icon: "md-home" },
        { to: "/message", title: "留言", icon: "md-mail" },
        { to: "/link", title: "友链", icon: "md-link" },
        { to: "/about", title: "关于", icon: "md-heart" },
        { to: "/bangumi", title: "番剧", icon: "logo-youtube" }
      ],
      profileTitles: [
        { to: "/profile/blog/manage", title: "博客", icon: "ios-cog" },
        { to: "/profile/type/manage", title: "分类", icon: "ios-bookmarks" },
        { to: "/profile/tag/manage", title: "标签", icon: "md-pricetags" },
        { to: "/profile/carousel/manage", title: "轮播图", icon: "ios-film" },
        { to: "/profile/link/manage", title: "友链", icon: "md-link" }
      ]
    }
  },
  watch: {
    $route(to, from) {
      this.close()
    }
  },
  methods: {
    close() {
      this.$emit('close')
    }
  },
}
</script>

<style lang="scss" scoped>
.menus_items {
  padding: 0 .5rem 2rem;
  animation: 0.8s ease 0s 1 normal none running sidebarItem;
  .site-page {
    position: relative;
    display: block;
    margin-left: 20px;
    padding: .5rem 1.5rem;
    color: #4c4948;
    font-size: 1.1rem;
    cursor: pointer;
    &:hover {
      color: #28cfcf;
    }
    i {
      width: 30%;
      text-align: left;
    }
    span {
      width: 70%;
    }
  }
}
</style>
<style lang="scss">
.ivu-drawer-mask {
  background: rgba(0,0,0,.7);
}
.ivu-drawer {
  width: 240px !important;
  .ivu-drawer-content {
    background: #eee;
    transition: all .5s;
  }
}

@keyframes sidebarItem {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>